<template>
    <el-dialog id="edit-resume"
               top="5vh"
               :width="dialog.width"
               :visible="dialog.visible"
               :modal-append-to-body="false"
               :close-on-click-modal="false"
               @close="close">
        <div slot="title" class="text-center">
            <span class="font-s20 text-bold">
                <icon name="resume"></icon>
                简历 {{ resume.id }}
            </span>
        </div>
        <!-- 头像 -->
        <div class="avatar"
             :class="{
                'avatar-success': resume.basic.avatar && resume.basic.avatar_audit == 1,
                'avatar-danger': resume.basic.avatar && resume.basic.avatar_audit == 0,
             }">
            <!-- 已上传 -->
            <el-popover v-if="resume.basic.avatar"
                        title="头像"
                        width="200"
                        trigger="click">
                <div class="mt-15 text-center">
                    <a :href="resume.basic.avatar_url" target="_blank" title="查看原图">
                        <el-image fit="cover"
                                  class="avatar-round"
                                  :src="resume.basic.avatar ? resume.basic.avatar_url : ''">
                        </el-image>
                    </a>
                    <div class="mt-10 text-right">
                        <el-popconfirm title="确定设定待状态吗？"
                                       @confirm="handleAuditAvatar([resume.id], 0)">
                            <el-button slot="reference"
                                       type="danger"
                                       size="mini"
                                       :disabled="resume.basic.avatar_audit === 0">
                                <icon name="cancel-audit"></icon>
                                待审
                            </el-button>
                        </el-popconfirm>
                        <el-popconfirm title="确定审核头像吗？"
                                       @confirm="handleAuditAvatar([resume.id], 1)">
                            <el-button slot="reference"
                                       type="success"
                                       size="mini"
                                       class="ml-5"
                                       :disabled="resume.basic.avatar_audit === 1">
                                <icon name="audit"></icon>
                                审核
                            </el-button>
                        </el-popconfirm>
                    </div>
                </div>
                <!-- 占位 -->
                <div slot="reference">
                    <el-image fit="cover"
                              class="el-avatar el-avatar--round avatar-img"
                              :src="resume.basic.avatar ? resume.basic.avatar_url : ''">
                        <div slot="error">
                            <icon name="user-solid" class="icon-avatar"></icon>
                        </div>
                    </el-image>
                    <div v-if="resume.basic.avatar_audit === 0"
                         class="avatar-audit avatar-audit--not">待审核</div>
                </div>
            </el-popover>
            <!-- 未上传 -->
            <div v-else
                 class="el-avatar el-avatar--circle avatar-img">
                <div slot="error">头像</div>
            </div>
        </div>
        <!-- 操作按钮 -->
        <div class="text-center">
            <el-button-group>
                <el-button size="mini">
                    <icon name="refresh"></icon>
                    重新载入
                </el-button>
                <el-button size="mini">
                    <icon name="update"></icon>
                    更新
                </el-button>
                <el-button size="mini">
                    <icon name="lock"></icon>
                    锁定
                </el-button>
                <el-button size="mini">
                    <icon name="send"></icon>
                    查看投递
                </el-button>
                <el-button size="mini">
                    <icon name="interview"></icon>
                    查看面试
                </el-button>
<!--                <el-button size="mini">-->
<!--                    <icon name="audit"></icon>-->
<!--                    审核-->
<!--                </el-button>-->
<!--                <el-button size="mini">-->
<!--                    <icon name="audit"></icon>-->
<!--                    审核头像-->
<!--                </el-button>-->
            </el-button-group>
        </div>
        <!-- 基本信息 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span  class="detail-project__mark"></span>
                        <span class="detail-project__label">基本信息</span>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-button type="warning"
                               size="mini"
                               plain
                               round
                               class="detail-button__edit"
                               @click="handleEditBasic">
                        <icon name="edit"></icon>编辑
                    </el-button>
                </div>
            </div>
            <el-descriptions size="medium"
                             label-class-name="detail-label"
                             border
                             :column="2">
                <!-- 姓名 -->
                <el-descriptions-item label="姓名：">{{ resume.basic.name }}</el-descriptions-item>
                <!-- 出生日期 -->
                <el-descriptions-item label="出生日期：">
                    <span :class="{'text-info-light': !resume.basic.birthday}">{{ resume.basic.birthday || '无' }}</span>
                    <el-tag v-if="resume.basic.age > 0"
                            type="success"
                            size="mini"
                            class="ml-10">{{ resume.basic.age }}岁</el-tag>
                </el-descriptions-item>
                <!-- 性别 -->
                <el-descriptions-item label="性别：">
                    <span :class="{'text-info-light': !resume.basic.gender_label}">
                        {{ resume.basic.gender_label || '无' }}</span>
                </el-descriptions-item>
                <!-- 婚姻 -->
                <el-descriptions-item label="婚姻：">
                    <span :class="{'text-info-light': !resume.basic.marital_label}">
                        {{ resume.basic.marital_label || '无' }}</span>
                </el-descriptions-item>
                <!-- 身高 -->
                <el-descriptions-item label="身高：">
                    <span :class="{'text-info-light': !resume.basic.height}">
                        {{ resume.basic.height || '无' }}</span>
                </el-descriptions-item>
                <!-- 学历 -->
                <el-descriptions-item label="学历：">
                    <span :class="{'text-info-light': !resume.basic.education_label}">
                        {{ resume.basic.education_label || '无' }}</span>
                </el-descriptions-item>
                <!-- 户籍 -->
                <el-descriptions-item label="户籍：">
                    <span :class="{'text-info-light': !resume.basic.census_label}">
                        {{ resume.basic.census_label || '无' }}</span>
                </el-descriptions-item>
                <!-- 经验 -->
                <el-descriptions-item label="工作经验：">
                    <span :class="{'text-info-light': !resume.basic.work_year_label}">
                        {{ resume.basic.work_year_label || '无' }}</span>
                </el-descriptions-item>
                <!-- 居住地 -->
                <el-descriptions-item label="居住地：">
                    <span :class="{'text-info-light': !resume.basic.home_address_label}">
                        {{ resume.basic.home_address_label || '无' }}</span>
                </el-descriptions-item>
                <!-- 地址 -->
                <el-descriptions-item label="地址：">
                    <span :class="{'text-info-light': !resume.basic.address}">{{ resume.basic.address || '无' }}</span>
                </el-descriptions-item>
                <!-- 手机号码 -->
                <el-descriptions-item label="手机号码：">
                    <span :class="{'text-info-light': !resume.basic.mobile}">{{ resume.basic.mobile || '无' }}</span>
                </el-descriptions-item>
                <!-- 邮箱 -->
                <el-descriptions-item label="邮箱：">
                    <span :class="{'text-info-light': !resume.basic.email}">{{ resume.basic.email || '无' }}</span>
                </el-descriptions-item>
                <!-- QQ -->
                <el-descriptions-item label="QQ 号码：">
                    <span :class="{'text-info-light': !resume.basic.qq}">{{ resume.basic.qq || '无' }}</span>
                </el-descriptions-item>
                <!-- 默认 -->
                <el-descriptions-item label="默认简历：">
                    <el-button :type="resume.default === 1 ? 'primary' : 'info'"
                               size="mini"
                               class="el-button--mini--status"
                               round>
                        {{ resume.default === 1 ? '是' : '否' }}
                    </el-button>
<!--                    <el-switch active-color="#13ce66"-->
<!--                               inactive-color="#ff4949"-->
<!--                               :width="30"-->
<!--                               :value="0"-->
<!--                               :active-value="1"-->
<!--                               :inactive-value="0">-->
<!--                    </el-switch>-->
<!--                    <div class="detail-tag">-->
<!--                        <el-button :type="resume.default === 1 ? 'success' : 'info'" size="mini" round>-->
<!--                            {{ resume.default ? '是' : '否' }}-->
<!--                        </el-button>-->
<!--                        <el-tag :type="resume.default === 1 ? 'success' : 'info'"-->
<!--                                size="medium"-->
<!--                                effect="dark">{{ resume.default ? '是' : '否' }}</el-tag>-->
<!--                    </div>-->
                </el-descriptions-item>
            </el-descriptions>
        </section>
        <!-- 自我介绍 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span  class="detail-project__mark"></span>
                        <span class="detail-project__label">自我介绍</span>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-button type="warning"
                               size="mini"
                               plain
                               round
                               class="detail-button__edit"
                               @click="handleEditIntroduction">
                        <icon name="edit"></icon>编辑
                    </el-button>
                </div>
            </div>
            <div :class="{'text-info-light': !resume.basic.introduction}">{{ resume.basic.introduction || '无' }}</div>
        </section>
        <!-- 工作经验 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span  class="detail-project__mark"></span>
                        <span class="detail-project__label">工作经验</span>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-button type="primary"
                               size="mini"
                               plain
                               round
                               class="detail-button__edit"
                               @click="handleEditIntroduction">
                        <icon name="plus"></icon>添加
                    </el-button>
                </div>
            </div>
<!--            <table class="is-bordered el-descriptions&#45;&#45;medium" width="100%" bgcolor="#eee">-->
<!--                <tr class="el-descriptions-row">-->
<!--                    <th class="el-descriptions-item__label is-bordered-label detail-label">1</th>-->
<!--                    <td>苑小勇</td>-->
<!--                    <th class="el-descriptions-item__label is-bordered-label detail-label">1</th>-->
<!--                    <td>douhaomi@qq.com</td>-->
<!--                </tr>-->
<!--                <tr class="el-descriptions-row">-->
<!--                    <th class="el-descriptions-item__label is-bordered-label detail-label">1</th>-->
<!--                    <td>-->
<!--                    </td>-->
<!--                    <th class="el-descriptions-item__label is-bordered-label detail-label">1</th>-->
<!--                    <td>2</td>-->
<!--                </tr>-->
<!--                <tr class="el-descriptions-row">-->
<!--                    <th class="el-descriptions-item__label is-bordered-label detail-label">1</th>-->
<!--                    <td>douhaomi@qq.com</td>-->
<!--                    <th class="el-descriptions-item__label is-bordered-label detail-label">1</th>-->
<!--                    <td>负责中国开关网(chinaswitch.com)网站开发、维护、上线运营，负责中国开关网(chinaswitch.com)网站开发、维护、上线运营-->
<!--                    </td>-->
<!--                </tr>-->
<!--            </table>-->
<!--            <div v-for="item in resume.work_exp"-->
<!--                 :key="item.id"-->
<!--                 class="r-description mt-20">-->
<!--                <div class="r-description-column">-->
<!--                    <div class="r-description-item">-->
<!--                        <div class="r-description-item__label">公司名称：</div>-->
<!--                        <div class="r-description-item__content">-->
<!--                            {{ item.company_name }}-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="r-description-item">-->
<!--                        <div class="r-description-item__label">岗位：</div>-->
<!--                        <div class="r-description-item__content">-->
<!--                            <div class="r-flex__item">-->
<!--                                <el-tag type="primary"-->
<!--                                        size="mini">{{ item.post }}</el-tag>-->
<!--                            </div>-->
<!--                            <div>-->
<!--                                <el-button-group>-->
<!--                                    <el-button size="mini" class="detail-button__edit"><icon name="edit"></icon>编辑</el-button>-->
<!--                                    <el-button size="mini" class="detail-button__edit"><icon name="del"></icon>删除</el-button>-->
<!--                                </el-button-group>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="r-description-column">-->
<!--                    <div class="r-description-item">-->
<!--                        <div class="r-description-item__label">就职日期：</div>-->
<!--                        <div class="r-description-item__content">{{ item.start_date }}~{{ item.end_date }}</div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="r-description-column">-->
<!--                    <div class="r-description-item">-->
<!--                        <div class="r-description-item__label">工作描述：</div>-->
<!--                        <div class="r-description-item__content">{{ item.content }}，{{ item.content }}</div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
            <el-descriptions v-for="item in resume.work_exp"
                             :key="item.id"
                             :column="1"
                             border
                             class="mt-10"
                             size="medium"
                             label-class-name="detail-label">
                <!-- 公司名称 -->
                <el-descriptions-item label="公司名称：">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            {{ item.start_date }}~{{ item.end_date }}
                            <el-tag type="info" size="small" effect="plain" class="ml-10">{{ item.company_name }}</el-tag>
                            <el-tag type="info" size="small" effect="plain" class="ml-10">{{ item.post }}</el-tag>
                        </div>
                        <el-button-group>
                            <el-button size="mini" round class="detail-button__edit"><icon name="edit"></icon>编辑</el-button>
                            <el-button size="mini" round class="detail-button__edit"><icon name="del"></icon>删除</el-button>
                        </el-button-group>
                    </div>
                </el-descriptions-item>
                <!-- 岗位 -->
<!--                <el-descriptions-item label="岗位：" content-style="width: 300px;">-->
<!--                    <div class="r-flex">-->
<!--                        <div class="r-flex__item">-->
<!--                            <el-tag type="primary"-->
<!--                                    size="mini">{{ item.post }}</el-tag>-->
<!--                        </div>-->
<!--                        <el-button-group>-->
<!--                            <el-button size="mini" class="detail-button__edit">上一页</el-button>-->
<!--                            <el-button size="mini" class="detail-button__edit">下一页</el-button>-->
<!--                        </el-button-group>-->
<!--                    </div>-->
<!--                </el-descriptions-item>-->
                <!-- 就职日期 -->
<!--                <el-descriptions-item label="就职日期：" span="2">-->
<!--                    {{ item.start_date }}~{{ item.end_date }}-->
<!--                </el-descriptions-item>-->
                <!-- 工作描述 -->
                <el-descriptions-item label="工作描述：">
                    {{ item.content }}
                </el-descriptions-item>
            </el-descriptions>
        </section>
        <!-- 求职意向 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span  class="detail-project__mark"></span>
                        <span class="detail-project__label">求职意向</span>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-button type="warning"
                               size="mini"
                               plain
                               round
                               class="detail-button__edit"
                               @click="handleEditJobIntention">
                        <icon name="edit"></icon>编辑
                    </el-button>
                </div>
            </div>
            <el-descriptions size="medium"
                             label-class-name="detail-label"
                             border
                             :column="1">
                <!-- 求职意向 -->
                <el-descriptions-item label="求职意向：">
                    <span :class="{'text-info-light': !resume.job_intention.intention_jobs}">
                        {{ resume.job_intention.intention_jobs || '无' }}</span>
                </el-descriptions-item>
                <!-- 期望薪资 -->
                <el-descriptions-item label="期望薪资：">
                    <span :class="{'text-info-light': !resume.job_intention.expected_salary_label}">
                        {{ resume.job_intention.expected_salary_label || '无' }}</span>
                    <el-tag v-show="resume.job_intention.is_expected_salary === 1"
                            type="success"
                            size="mini"
                            effect="dark"
                            class="ml-10">显示面议</el-tag>
                </el-descriptions-item>
                <!-- 求职状态 -->
                <el-descriptions-item label="求职状态：">
                    <span :class="{'text-info-light': !resume.job_intention.job_status_label}">{{ resume.job_intention.job_status_label || '无' }}</span>
                </el-descriptions-item>
                <!-- 期望职位 -->
                <el-descriptions-item label="期望职位：">
                    <div class="detail-tag">
                        <el-tag v-for="item in resume.job_intention.work_post"
                                :key="item.value">
                            {{ item.label }}
                        </el-tag>
                    </div>
                </el-descriptions-item>
                <!-- 工作地区 -->
                <el-descriptions-item label="工作地区：">
                    <div class="detail-tag">
                        <el-tag v-for="item in resume.job_intention.work_area"
                                :key="item.value">
                            {{ String(item.value).length === 8 ? item.label : item.merge_label }}
                        </el-tag>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </section>
        <!-- 教育经历 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span  class="detail-project__mark"></span>
                        <span class="detail-project__label">教育经历</span>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-button type="primary"
                               size="mini"
                               plain
                               round
                               class="detail-button__edit"
                               @click="handleEditIntroduction">
                        <icon name="plus"></icon>添加
                    </el-button>
                </div>
            </div>
        </section>
        <!-- 培训经历 -->
        <section>
            <div class="el-divider el-divider--horizontal">
                <div class="el-divider__text is-left">
                    <div class="detail-project">
                        <span  class="detail-project__mark"></span>
                        <span class="detail-project__label">培训经历</span>
                    </div>
                </div>
                <div class="el-divider__text is-right">
                    <el-button type="primary"
                               size="mini"
                               plain
                               round
                               class="detail-button__edit"
                               @click="handleEditIntroduction">
                        <icon name="plus"></icon>添加
                    </el-button>
                </div>
            </div>
        </section>
        <!-- from dialog -->
        <component :is="dialogBox.component" :dialog="dialogBox" @close="closeDialogBox"></component>
    </el-dialog>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { Prop, Emit } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

import DialogBoxMixin from '@/mixins/dialog'
import functionMixin from '@/mixins/function'
import resumeOptionsMixin from '@/mixins/options'

import { toJson, loading, errorMessage, successMessage } from '@/utils'

const module = namespace('cms/resume')

import EditBasic from '@/views/cms/personal/resume/EditBasic.vue'
import EditJobIntention from '@/views/cms/personal/resume/EditJobIntention.vue'
import EditIntroduction from '@/views/cms/personal/resume/EditIntroduction.vue'

@Component({
  components: {
    EditBasic,
    EditJobIntention,
    EditIntroduction
  }
})
export default class Detail extends mixins(DialogBoxMixin, functionMixin, resumeOptionsMixin) {
  @Prop({ type: Object, default: { width: '1000px', visible: false } }) dialog!: any

  // Vuex
  @module.State resume!: any
  @module.Action update!: (payLoad: any) => Promise<any>

  private edit: any = {
    basic: false,
    intention: false,
    introduce: false
  }

  // form 模型
  public model: any = {}

  private saveLoading: boolean = false

  /*----- 钩子 -----*/
  created() {
    this.model = toJson(this.resume)
  }

  /**
   * 编辑基本信息
   *
   * @return {void}
   */
  private handleEditBasic(): void {
    this.dialogBox.width = '800px'
    this.dialogBox.component = 'edit-basic'
    this.$nextTick(() => {
      this.dialogBox.visible = true
      this.dialogBox.index = this.dialog.index
    })
  }

  /**
   * 编辑基本信息
   *
   * @return {void}
   */
  private handleEditJobIntention(): void {
    this.dialogBox.width = '800px'
    this.dialogBox.component = 'edit-job-intention'
    this.$nextTick(() => {
      this.dialogBox.visible = true
      this.dialogBox.index = this.dialog.index
    })
  }

  /**
   * 编辑基本信息
   *
   * @return {void}
   */
  private handleEditIntroduction(): void {
    this.dialogBox.width = '800px'
    this.dialogBox.component = 'edit-introduction'
    this.$nextTick(() => {
      this.dialogBox.visible = true
      this.dialogBox.index = this.dialog.index
    })
  }

  /**
   * 提交表单
   */
  private submitForm(): void | boolean {
    this.saveLoading = true
    this.update({ id: this.resume.id, index: this.dialog.index, params: this.model }).then((res: any) => {
      this.saveLoading = false
      if (res.status !== 200) {
        errorMessage(res.message)
        return false
      }

      this.model = toJson(res.data.show) // 重新赋给 model
      successMessage(res.message)
      this.close()
    }).catch((err: any) => {
      this.saveLoading = false
    })
  }

  @Emit()
  close(): void {}
}
</script>

<style lang="scss" scoped>
@import '~@/styles/element/element-variables';
.r {
    &-description {
        background-color: #fafafa;
        border: 1px solid #EBEEF5;
        &-column {
            display: flex;
            border-bottom: 1px solid #EBEEF5;
            &:last-child {
                border-bottom: none;
            }
        }
        &-item {
            display: flex;
            align-items: stretch;
            justify-content: center;
            flex: 1;

            &:first-child &__label {
                border-left: none;
            }
            &__label {
                padding: 10px 10px;
                width: 100px;
                color: #909399;
                font-size: 14px;
                font-weight: 500;
                text-align: right;

                border-left: 1px solid #EBEEF5;
                border-right: 1px solid #EBEEF5;
            }
            &__content {
                display: flex;
                align-items: center;
                flex: 1;
                padding: 10px 10px;
                background-color: #fff;
            }

        }
    }
}
::v-deep {
    .el {
        //&-dialog {
        //    ::v-deep &__body {
        //        padding: 20px 30px;
        //    }
        //}
        &-date {
            &-editor {
                &.el-input {
                    width: 100% !important;;
                }
            }
        }

        &-select,
        &-cascader {
            width: 100% !important;
        }
        &-button--mini--status {
            padding: 4px 10px;
            //&.is-round {
            //    padding: 4px 10px;
            //}
        }
    }

    // 详情
    .detail {
        &-project {
            display: flex;
            align-items: center;

            &__mark {
                flex: 1;
                margin-right: 6px;
                width: 5px;
                height: 18px;
                background-color: $--color-primary;
                border-radius: 5px;
            }

            &__label {
                color: $--color-primary;
                font-size: 16px;
            }
        }

        &-button {
            &__edit {
                padding: 3px 10px;
            }
        }

        &-label {
            width: 100px !important;
            text-align: right;
        }

        &-intro {

        }

        &-tag {
            margin-top: -10px;
            .el-tag {
                margin: 10px 10px 0 0;
                height: 28px;
                font-size: 14px;
                line-height: 26px;
                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }
}


// 头像
.avatar {
    position: absolute;
    top: 210px;
    right: 50px;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #fff;
    cursor: pointer;
    &-danger {
        box-shadow: 0 0 0 4px $--color-danger;
    }
    &-success {
        box-shadow: 0 0 0 4px $--color-success;
    }

    &-img {
        position: relative;
        width: 100px;
        height: 100px;
        line-height: 100px;

        .icon-avatar {
            font-size: 60px;
        }
    }

    // 审核状态
    &-audit {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        //border-radius: 50%;

        &--not {
            color: rgba(#fff, .5);
            font-size: 28px;
            font-weight: bold;
            line-height: 100px;
            text-align: center;
            background-color: rgba($--color-danger, .7);
        }
    }

    &-round {
        //border: 2px solid #fff;
        border-radius: $--border-radius-base;
        box-shadow: 0 0 10px rgba(#000, .2);
    }
}
</style>
